import { MetadataProperty, MetadataSelectOption } from './types/Lowcode'
/**
 * 当前支持的可用组件
 */
const OptionalComponents: MetadataSelectOption[] = [
  {
    label: 'RadioGroup',
    value: 'RadioGroup'
  },
  {
    label: 'RadioButton',
    value: 'RadioButton'
  },
  {
    label: 'CheckboxGroup',
    value: 'CheckboxGroup'
  },
  {
    label: 'CheckboxButton',
    value: 'CheckboxButton'
  },
  {
    label: 'Input',
    value: 'Input'
  },
  {
    label: 'Autocomplete',
    value: 'Autocomplete'
  },
  {
    label: 'InputNumber',
    value: 'InputNumber'
  },
  {
    label: 'Select',
    value: 'Select'
  },
  {
    label: 'Cascader',
    value: 'Cascader'
  },
  {
    label: 'Switch',
    value: 'Switch'
  },
  {
    label: 'Slider',
    value: 'Slider'
  },
  {
    label: 'TimePicker',
    value: 'TimePicker'
  },
  {
    label: 'DatePicker',
    value: 'DatePicker'
  },
  {
    label: 'Rate',
    value: 'Rate'
  },
  {
    label: 'ColorPicker',
    value: 'ColorPicker'
  },
  {
    label: 'Transfer',
    value: 'Transfer'
  },
  {
    label: 'Divider',
    value: 'Divider'
  },
  {
    label: 'TimeSelect',
    value: 'TimeSelect'
  },
  {
    label: 'SelectV2',
    value: 'SelectV2'
  },
  {
    label: 'InputPassword',
    value: 'InputPassword'
  },
  {
    label: 'Editor',
    value: 'Editor'
  },
  {
    label: 'TreeSelect',
    value: 'TreeSelect'
  },
  {
    label: 'Upload',
    value: 'Upload'
  },
  {
    label: 'JsonEditor',
    value: 'JsonEditor'
  }
]

/**
 * 页面设计可选属性
 * 按照分组控制可用范围
 */
export const Metadata: MetadataProperty[] = [
  {
    field: 'show',
    label: '是否显示',
    value: false,
    component: 'Switch',
    scope: ['table', 'form', 'search', 'detail']
  },
  // {
  //   field: 'field',
  //   label: '字段',
  //   component: 'Input',
  //   componentProps: {
  //     disabled: true
  //   },
  //   value: '',
  //   scope: ['table', 'form', 'search', 'detail']
  // },
  // {
  //   field: 'label',
  //   label: '名称',
  //   component: 'Input',
  //   componentProps: {
  //     disabled: true
  //   },
  //   value: '',
  //   scope: ['table', 'form', 'search', 'detail']
  // },
  {
    field: 'component',
    label: '组件类型',
    value: 'Input',
    component: 'Select',
    componentProps: {
      options: OptionalComponents
    },
    scope: ['form', 'search']
  },
  {
    field: 'value',
    label: '默认值',
    value: '',
    component: 'Input',
    scope: ['form', 'search']
  },
  {
    field: 'optionApi',
    label: '远程数据源',
    value: '',
    component: 'Input',
    scope: ['form', 'search']
  },
  {
    field: 'colProps.span',
    label: '格栅属性',
    value: 24,
    component: 'InputNumber',
    scope: ['form', 'search']
  },
  {
    field: 'colProps.xs',
    label: '超小<768px',
    value: 24,
    component: 'InputNumber',
    scope: ['form', 'search']
  },
  {
    field: 'colProps.sm',
    label: '小 ≥768px',
    value: 24,
    component: 'InputNumber',
    scope: ['form', 'search']
  },
  {
    field: 'colProps.md',
    label: '中等≥992px',
    value: 24,
    component: 'InputNumber',
    scope: ['form', 'search']
  },
  {
    field: 'colProps.lg',
    label: '大 ≥1200px',
    value: 24,
    component: 'InputNumber',
    scope: ['form', 'search']
  },
  {
    field: 'colProps.xl',
    label: '超大≥1920px',
    value: 24,
    component: 'InputNumber',
    scope: ['form', 'search']
  },
  {
    field: 'componentProps.readonly',
    label: '是否只读',
    value: false,
    component: 'Switch',
    scope: ['form', 'search']
  },
  {
    field: 'componentProps.disabled',
    label: '是否禁用',
    value: false,
    component: 'Switch',
    scope: ['form', 'search']
  },
  {
    field: 'formItemProps.required',
    label: '是否必填',
    value: false,
    component: 'Switch',
    scope: ['form', 'search']
  },
  {
    field: 'componentProps.options',
    label: '自定义数据源',
    value: '[]',
    component: 'Input',
    scope: ['form', 'search']
  },
  {
    field: 'formItemProps.style',
    label: '组件样式',
    value: '',
    component: 'Input',
    scope: ['form', 'search']
  },
  {
    field: 'componentProps.style',
    label: '控件样式',
    value: '',
    component: 'Input',
    scope: ['form', 'search']
  },
  // table detail 共有属性
  {
    field: 'width',
    label: '默认宽度',
    component: 'InputNumber',
    value: '',
    scope: ['table', 'detail']
  },
  {
    field: 'minWidth',
    label: '最小宽度',
    component: 'InputNumber',
    value: '',
    scope: ['table', 'detail']
  },
  // table 可用属性
  {
    field: 'fixed',
    label: '固定列',
    component: 'Switch',
    value: true,
    scope: ['table']
  },
  {
    field: 'showOverflowTooltip',
    label: '文字提示',
    component: 'Switch',
    value: true,
    scope: ['table']
  },
  {
    field: 'resizable',
    label: '宽度调整',
    component: 'Switch',
    value: true,
    scope: ['table']
  },
  {
    field: 'headerAlign',
    label: '表头对齐',
    component: 'Select',
    value: 'center',
    componentProps: {
      options: [
        {
          label: '居左',
          value: 'left'
        },
        {
          label: '居中',
          value: 'center'
        },
        {
          label: '居右',
          value: 'right'
        }
      ]
    },
    scope: ['table']
  },
  {
    field: 'align',
    label: '内容对齐',
    component: 'Select',
    value: 'center',
    componentProps: {
      options: [
        {
          label: '居左',
          value: 'left'
        },
        {
          label: '居中',
          value: 'center'
        },
        {
          label: '居右',
          value: 'right'
        }
      ]
    },
    scope: ['table']
  },
  {
    field: 'slots.header',
    label: '表头插槽',
    value: '',
    component: 'Input',
    componentProps: {
      readonly: true,
      rows: 1,
      type: 'textarea'
    },
    scope: ['table']
  },
  // table 可用属性
  {
    field: 'align',
    label: '内容对齐',
    value: 'center',
    component: 'Select',
    componentProps: {
      options: [
        {
          label: '居左',
          value: 'left'
        },
        {
          label: '居中',
          value: 'center'
        },
        {
          label: '居右',
          value: 'right'
        }
      ]
    },
    scope: ['detail']
  },
  {
    field: 'labelAlign',
    label: 'label对齐',
    value: 'center',
    component: 'Select',
    componentProps: {
      options: [
        {
          label: '居左',
          value: 'left'
        },
        {
          label: '居中',
          value: 'center'
        },
        {
          label: '居右',
          value: 'right'
        }
      ]
    },
    scope: ['detail']
  },
  {
    field: 'span',
    label: '格栅属性',
    value: 24,
    component: 'InputNumber',
    scope: ['detail']
  },
  {
    field: 'slots.label',
    label: 'Label插槽',
    value: '',
    component: 'Input',
    componentProps: {
      readonly: true,
      rows: 1,
      type: 'textarea'
    },
    scope: ['detail']
  },
  {
    field: 'slots.default',
    label: '默认插槽函数',
    value: '',
    component: 'Input',
    componentProps: {
      readonly: true,
      rows: 1,
      type: 'textarea'
    },
    scope: ['table', 'detail']
  },
  // 事件
  {
    field: 'customEvents.beforeLoad',
    label: '表单载入前',
    value: '',
    component: 'Input',
    componentProps: {
      readonly: true,
      rows: 1,
      type: 'textarea'
    },
    scope: ['form', 'detail']
  },
  {
    field: 'customEvents.beforeSave',
    label: '保存前事件',
    value: '',
    component: 'Input',
    componentProps: {
      readonly: true,
      rows: 1,
      type: 'textarea'
    },
    scope: ['form']
  },
  {
    field: 'customEvents.afterSave',
    label: '保存后事件',
    value: '',
    component: 'Input',
    componentProps: {
      readonly: true,
      rows: 1,
      type: 'textarea'
    },
    scope: ['form']
  }
]

export const getAllMetadata = function () {
  const tableMetadata: MetadataProperty[] = getMetadata('table')
  const formMetadata: MetadataProperty[] = getMetadata('form')
  const searchMetadata: MetadataProperty[] = getMetadata('search')
  const detailMetadata: MetadataProperty[] = getMetadata('detail')
  const otherMetadata: MetadataProperty[] = getMetadata('other')

  return {
    table: tableMetadata,
    form: formMetadata,
    search: searchMetadata,
    detail: detailMetadata,
    other: otherMetadata
  }
}

export const getMetadata = function (scopeName: string) {
  if (!scopeName) {
    return []
  }
  const metadata: MetadataProperty[] = []
  Metadata.forEach((item) => {
    if (!item.scope) {
      return
    }
    if (typeof item.scope === 'string' && item.scope === 'all') {
      metadata.push(item)
      return
    }
    if (typeof item.scope === 'object' && item.scope.indexOf(scopeName) > -1) {
      metadata.push(item)
      return
    }
  })
  return JSON.parse(JSON.stringify(metadata))
}
